<template>
  <div>
    <div class="teacher_list_out_out flexBetween">
      <div class="change-byn" @click="fnPrev()" v-if="canScroll">
        <img v-if="currentClickNumber > 1" class="btn_active_icon" src="../assets/left-btn.png" alt=""/>
        <span v-else></span>
      </div>
      <div class="teacher_list_out flexBetween">
        <div class="teacher_list_box" :ref="`fixedBox`">
<!--          // 判断可以滑动，当teacherList的容量大于外层设定宽度，则可以滑动-->
          <div
              v-if="canScroll"
              class="teacher_list flexCenter"
              :style="
								`width:${signleWidth *
									teacherList.length}px;transform:translate(${scrollResultWidth}px,0);transition:0.7s;`
							"
          >
            <div
                :class="teacherIndex == i? 'teacher_imgs active': 'teacher_imgs'"
                v-for="(item, i) in teacherList"
                :key="i"
            >{{item.label}}</div>
          </div>
        </div>
      </div>

      <div
          class="change-byn"
          @click="fnNext(activeName)"
          v-if="canScroll"
      >
        <img  v-if="noScrollRight" class="btn_active_icon" src="../assets/right-btn.png" alt=""/>
        <span v-else ></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'changeItem',
  data() {
    return {
      scrollResultWidth: 0, //transform滚动的距离
      signleWidth: 100, //单个流程的宽度
      activeName: 0,
      currentClickNumber: 1,
      noScrollRight: true,
      canScroll: true,
      teacherList: [
        {label: '商业竞价', name: '1', total:''},
        {label: '资产挂牌', name: '4', total:''},
        {label: '挂牌竞价', name: '5', total:''},
        {label: '会员竞价', name: '11', total:''},
        {label: 'V字竞价', name: '12', total:''},
        {label: '邀标竞价', name: '10', total:''},
        {label: '出租竞价', name: '13', total:''},
        {label: '承运竞价', name: '14', total:''},
        {label: '交易中心', name: '16', total:''},
        {label: '产权交易', name: '15', total:''},
        {label: '罚没资产', name: '2', total:''},
        {label: '司法拍卖', name: '3', total:''},
        {label: '出售', name: '6', total:''},
        {label: '求购', name: '7', total:''},
        {label: '挂牌公告', name: '8', total:''},
        {label: '新闻公告', name: '9', total:''},
      ],
      teacherIndex: 0
    }
  },
  methods: {
    //初始化判断是否可以向右滚动
    initgoRightArrow() {
      const currentScrollWidth = this.$refs[`fixedBox`].clientWidth
      const canNumber = Math.floor(currentScrollWidth / this.signleWidth) //可以放下的个数
      //如果最后一个流程图标已经展示出来，则停止滚动
      if (
          this.currentClickNumber + canNumber >=
          this.teacherList.length
      ) {
        this.noScrollRight = false
        this.canScroll = false
      } else {
        this.noScrollRight = true
        this.canScroll = true
      }
    },
    //点击上一个
    fnPrev() {
      //如果右点击的次数大于1，才可以左滚
      if (this.currentClickNumber > 1) {
        this.currentClickNumber -= 1
        this.noScrollRight = true
        this.fnScrollWidth('reduce')
      } else {
        return false
      }
    },
    //点击下一个
    fnNext() {
      const currentScrollWidth = this.$refs[`fixedBox`].clientWidth
      const canNumber = Math.floor(currentScrollWidth / this.signleWidth) //可以放下的个数
      //如果最后一个流程图标已经展示出来，则停止滚动
      if (
          this.currentClickNumber + canNumber >=
          this.teacherList.length
      ) {
        return
      }
      //说明放不下有滚动条
      if (this.teacherList.length > canNumber) {
        this.currentClickNumber += 1
        if (
            this.currentClickNumber + canNumber >=
            this.teacherList.length
        ) {
          this.noScrollRight = false
        }
        this.fnScrollWidth('add')
      }
    },
    //translate的宽度
    fnScrollWidth(type) {
      let result = 0
      if (type === 'reduce') {
        result = 110
      } else if (type === 'add') {
        result = -110
      } else {
        result = 0
      }
      this.scrollResultWidth += result
    },
  }
}
</script>

<style lang="scss" scoped>

.flexCenter {
  display: flex;
  align-items: center;
}
.teacher_list_out_out {
  display: flex;
  width: 1000px;
  height: 90px;
  margin: 30px auto 0;
  .teacher_list_out {
    width: 915px;
    height: 90px;
    position: relative;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    .teacher_list_box {
      width: 915px;
      flex: 1;
      overflow: hidden;
      .teacher_list {
        width: 100%;
        box-sizing: border-box;
        padding: 20px 0;
        white-space: nowrap;
        .teacher_imgs {
          width: 68px;
          height: 68px;
          margin-right: 30px;
          border-radius: 50%;
          cursor: pointer;
        }
        .teacher_imgs:last-child {
          margin-right: 0;
        }
        .active {
          width: 90px;
          color: #023486;
          //height: 90px;
        }
      }
    }
  }
  .change-byn {
    width: 42px;
    height: 42px;
    .btn_icon {
      width: 42px;
      height: 42px;
    }
    .btn_active_icon {
      width: 42px;
      height: 42px;
      cursor: pointer;
    }
  }
}
</style>
